<template>
  <el-header class="header">
    <div class="title"> 
      <i class="iconfont" :class="clickMenu.icon"></i>
      <span>{{clickMenu.title}}</span>
    </div>
    <div class="userinfo">
      <span class="text">欢迎</span>
      <span class="userimg">
        <img :src="$store.getters.user.userimg" alt="" />
      </span>
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="users">
          <span class="nickname">{{ $store.getters.user.name }}</span>
          <i class="iconfont icon-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="info">个人信息</el-dropdown-item>
          <el-dropdown-item command="quit">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script>
export default {
  name: "manageheader",
  data() {
    return {
      activeMenu:{}
    }
  },
  methods:{
    handleCommand(data) {
      switch (data) {
        case "info":
          this.$router.push("/manage/infoshow");
          break;
        case "quit":
          //清除localstrage里面的token信息
          localStorage.removeItem("eleToken");
          this.$store.dispatch("clearState");
          this.$router.push("/login");
          break;
      }
    },
  },
  computed:{
    clickMenu() {
      const obj = this.$store.getters.getActiveMenu
      return obj
    }
  },
};
</script>

<style scoped lang="scss">
.header {
  width:100%;
  height:60px;
  border: 1px solid #eee;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position:sticky;
  top:0;
  z-index: 999;
  .title {
    font-size: 24px;
    font-weight: 600;
    i {
      font-size: 30px;
    }
  }
  .userinfo {
    margin-right: 30px;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: end;
    .text {
      font-size: 24px;
    }
    .userimg {
      width: 50px;
      height: 50px;
      display: block;
      border: 2px solid #ccc;
      border-radius: 15px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .users {
      cursor: pointer;
      .nickname {
        font-size: 14px;
      }
    }
  }
}
</style>